import React, { useEffect, useState } from 'react'
import logo from './img/logo.png'
import {
    Form,
    Input,
    Button,
    Toast
} from 'antd-mobile'
import './index.scss'
import { Checkbox } from 'antd-mobile'
import { loginAction } from '../../store/action/user';
import { getSmsCode, login } from '../../api/user';
import { connect } from 'react-redux';
import Captchas from '../../Captchas'
import { useNavigate } from 'react-router-dom';

const Login = (props) => {
    const navigate = useNavigate();

    const [phone, setPhone] = useState('')
    const [smsCode, setSmsCode] = useState('')
    const [disabled, setDisabled] = useState(true)
    const [btnText, setBtnText] = useState("获取验证码")
    const [isShow, setIsShow] = useState(false)
    let timer = null
    //接收input框的数据
    const changeInput = (val) => {
        console.log(val);
        setPhone(val)
        const reg = /^1[3,4,5,6,7,8,9]\d{9}$/;
        if (reg.test(val)) {
            console.log(46);

            setDisabled(false)
        } else {
            console.log(47);
            setDisabled(true)

        }

    }

    const changeInput1 = (val) => {
        setSmsCode(val)
    }
    //获取验证码
    const getSmsCodeFn = () => {
        Toast.show({
            content: '验证码已发送，请注意查收',
        })
        setIsShow(true)
        //调用 获取验证码的接口
        getSmsCode(phone).then(res => {
            console.log(res);
            if (res.data.code === 666) {
                //按钮倒计时,按钮置灰
                setDisabled(true)
                let num = 60;
                timer = setInterval(() => {
                    num--;
                    setBtnText(`重新获取(${num})`)
                    if (num <= 0) {
                        clearInterval(timer);
                        setBtnText(`重新获取`)
                        setDisabled(false)

                    }
                }, 1000)
            }
        })
    }

    //登录操作
    const loginFn = () => {
        login(phone, smsCode).then(res => {
            if (res.data.code === 666) {
                console.log(res);
                //将用户信息和token保存到 redux
                props.loginAction(res.data.result);
                //页面跳转
                navigate("/");

            }
        })
    }
    useEffect(() => {
        return clearInterval(timer);
    }, [timer])

    return (
        <div className='containe_1'>
            {
                isShow ? <Captchas /> : ''

            }

            <div className='login_header'>
                <div>
                    <img src={logo} alt={logo} style={{ width: '94px', height: '94px' }} />
                    <div style={{ fontSize: '16px', color: '#1f1f21', fontWeight: '700', textAlign: 'center', lineHeight: '40px' }}>旺仔旺铺</div>
                </div>
            </div>

            <Form
                layout='horizontal'
                footer={
                    <Button block type='submit' color='primary' size='large'
                        style={{
                            width: '200px',
                            outline: 'none',
                            border: 'none',
                            borderRadius: '10px',
                            marginBottom: '5px',

                        }} onClick={loginFn}>
                        登录
                    </Button>
                }
            >
                <Form.Item

                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }]}
                    style={{ width: '90%', borderBottom: '1px solid #ccc', margin: 'auto' }}
                >
                    <Input placeholder='请输入手机号码' value={phone} onChange={(val) => { changeInput(val) }} name="phone" />
                </Form.Item>


                <Form.Item

                    label='验证码'
                    rules={[{ required: true, message: '验证码不能为空' }]}
                    style={{ width: '90%', borderBottom: '1px solid #ccc', margin: 'auto', display: 'flex', marginTop: '20px' }}
                >
                    <Input placeholder='请输入验证码' style={{ width: '60%' }} value={smsCode} onChange={(val) => { changeInput1(val) }} name="smsCode" />
                    <Button type="button" color="primary" style={{ position: 'absolute', top: '6px', left: '250px', fontSize: '14px' }} disabled={disabled} onClick={getSmsCodeFn}>{btnText}</Button>
                </Form.Item>
            </Form>

            <div className='check_box'>
                <Checkbox
                    style={{
                        '--icon-size': '18px',
                        '--font-size': '14px',
                        '--gap': '6px',
                    }}
                >
                    登录注册代表同意
                    <span>用户协议</span>
                    和
                    <span>隐私协议</span>
                </Checkbox>
            </div>
        </div>

    )
}
// }
export default connect(
    state => ({ user: state.user }), {
    loginAction
}
)(Login);
